<template>
  <div class="venus-list-page">
    <!--自定义资产模板界面-->
    <div class="page-search">
      <el-row type="flex" class="search-list">
        <el-row type="flex" class="list-items">
          <div class="venus-input-box">
            <label>模板名称</label>
            <el-input
              v-model="queryForm.mod_name"
              class="venus-input-middle"
              placeholder="请输入模板名称"
            />
          </div>
          <div class="venus-input-box">
            <label>排列方式</label>
            <el-select
              v-model="queryForm.col_count"
              class="venus-input-middle"
              placeholder="--请选择排列方式--"
            >
              <el-option
                v-for="(item) in colCountItems"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="venus-input-box">
            <label>资产一级分类</label>
            <el-select
              v-model="queryForm.cbc_type"
              class="venus-input-middle"
              placeholder="--请选择资产一级分类--"
              @change="cbcChange"
            >
              <el-option
                v-for="(item) in cbcTypeItems"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="venus-input-box">
            <label>资产二级分类</label>
            <el-select
              v-model="queryForm.cbc_subtype"
              class="venus-input-middle"
              placeholder="--请选择资产二级分类--"
            >
              <el-option
                v-for="(item) in cbcSubTypeItems"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="venus-input-box">
            <label>人行一级分类</label>
            <el-select
              v-model="queryForm.pb_type"
              class="venus-input-middle"
              placeholder="--请选择人行一级分类--"
              @change="pbChange"
            >
              <el-option
                v-for="(item) in pbTypeItems"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="venus-input-box">
            <label>人行二级分类</label>
            <el-select
              v-model="queryForm.pb_subtype"
              class="venus-input-middle"
              placeholder="--请选择人行二级分类--"
              @change="pbSubChange"
            >
              <el-option
                v-for="(item) in pbSubtypeItems"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="venus-input-box">
            <label>人行三级分类</label>
            <el-select
              v-model="queryForm.pb_thrtype"
              class="venus-input-middle"
              placeholder="--请选择人行三级分类--"
            >
              <el-option
                v-for="(item) in pbThrtypeItems"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-row>
      </el-row>
    </div>
    <!--    系统属性-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">系统属性</div>
      </el-row>
      <el-checkbox-group v-model="checkListSys">
        <el-checkbox label="资产负债代码" disabled />
        <el-checkbox label="资产负债名称" disabled />
        <el-checkbox label="起息日" disabled />
        <el-checkbox label="到期日" disabled />
      </el-checkbox-group>
    </div>
    <!--    自定义资产属性-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">自定义资产属性</div>
      </el-row>
      <el-checkbox-group v-model="checkListAssdept">
        <el-checkbox label="报送人行资产代码" />
        <el-checkbox label="报送人行资产名称" />
        <el-checkbox label="标的类别" />
        <el-checkbox label="标的物类型" />
      </el-checkbox-group>
    </div>
    <!--    自定义交易属性-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">自定义交易属性</div>
      </el-row>
      <el-checkbox-group v-model="checkListDeal">
        <el-checkbox label="百元净价(元)" />
        <el-checkbox label="百元全价(元)" />
        <el-checkbox label="单位应计利息(元)" />
        <el-checkbox label="到期百元净价(元)" />
      </el-checkbox-group>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">已选属性信息</div>
      </el-row>
      <table-pagination
        :table-data="tableData"
        :table-header-config="tableHeaderConfig"
        highlight-current-row
        :total="total"
        :page-size="pageSize"
        :now-page="nowPage"
        :operation-config="operationConfig"
      />
    </div>

    <!--新增弹出框-->
    <el-dialog :title="dlgTilte" :visible.sync="dlgFormVisible">
      <!-- ref=dlgForm用于验证表单 -->
      <el-form ref="dlgForm" :model="dlgForm">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="序号"
              :label-width="dlgFormLabelWidth"
              prop="attr_num"
              :rules="dlgFormRules.attr_num"
            >
              <el-input v-model="dlgForm.attr_num" :disabled="false" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="属性名称"
              :label-width="dlgFormLabelWidth"
              prop="label"
              :rules="dlgFormRules.label"
            >
              <el-input v-model="dlgForm.label" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="属性别名"
              :label-width="dlgFormLabelWidth"
              prop="alias"
              :rules="dlgFormRules.alias"
            >
              <el-input v-model="dlgForm.alias" :disabled="false" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <!-- prop,:rules必须一起写 -->
            <el-form-item
              label="属性约束"
              :label-width="dlgFormLabelWidth"
              prop="form_rules"
              :rules="dlgFormRules.form_rules"
            >
              <el-select
                v-model="dlgForm.form_rules"
                placeholder="请选择属性约束"
                :disabled="dlgFormDisabled"
              >
                <el-option
                  v-for="item in form_rules_data"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <el-form-item
              label="默认值"
              :label-width="dlgFormLabelWidth"
              prop="default_value"
              :rules="dlgFormRules.default_value"
            >
              <el-input v-model="dlgForm.default_value" :disabled="false" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <!-- prop,:rules必须一起写 -->
            <el-form-item
              label="是否只读"
              :label-width="dlgFormLabelWidth"
              prop="form_rules"
              :rules="dlgFormRules.is_readonly"
            >
              <el-select
                v-model="dlgForm.is_readonly"
                placeholder="请选择是否只读"
                :disabled="dlgFormDisabled"
              >
                <el-option
                  v-for="item in is_readonly_data"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12">
            <!-- prop,:rules必须一起写 -->
            <el-form-item
              label="交易时是否显示"
              :label-width="dlgFormLabelWidth"
              prop="form_rules"
              :rules="dlgFormRules.deal_show"
            >
              <el-select
                v-model="dlgForm.deal_show"
                placeholder="请选择交易时是否显示"
                :disabled="dlgFormDisabled"
              >
                <el-option
                  v-for="item in deal_show_data"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-show="!dlgFormDisabled" slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="success" @click="okHandler">确 定</el-button>
        <el-button type="info" plain @click="dlgFormVisible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'M82001ex',
    data() { // 数据定义
      return {
        /* 查询部分 */
        queryForm: {
          mod_name: '', // 模板名称
          col_count: '', // 排列方式
          cbc_type: '', // 资产一级分类
          cbc_subtype: '', // 资产二级分类
          pb_type: '', // 人行一级分类
          pb_subtype: '', // 人行二级分类
          pb_thrtype: '' // 人行三级分类
        },
        colCountItems: [], // 排列方式
        cbcTypeItems: [], // 资产一级分类
        cbcSubTypeItems: [], // 资产二级分类
        pbTypeItems: [], // 人行一级分类
        pbSubtypeItems: [], // 人行二级分类
        pbThrtypeItems: [], // 人行三级分类
        // 复选框
        checkListSys: [], // 系统属性
        checkListAssdept: [], // 自定义资产属性
        checkListDeal: [], // 自定义交易属性
        form_rules_data: [
          { value: '1', label: '必填' },
          { value: '2', label: '不必填' }
        ], // 自定义交易属性
        is_readonly_data: [
          { value: '1', label: '只读' },
          { value: '2', label: '不只读' }
        ], // 自定义交易属性
        deal_show_data: [
          { value: '1', label: '显示' },
          { value: '2', label: '不显示' }
        ], // 自定义交易属性
        /* 表格 */
        tableData: [], // 表格数据
        tableHeaderConfig: [ // 表头配置
          { prop: 'attr_num', label: '序号' },
          { prop: 'field_type', label: '属性类别' },
          { prop: 'label', label: '属性名称' },
          { prop: 'alias', label: '属性别名' },
          { prop: 'default_value', label: '默认值' },
          { prop: 'form_rules', label: '属性约束' },
          { prop: 'is_readonly', label: '是否只读' },
          { prop: 'sys_level', label: '级别' },
          { prop: 'deal_show', label: '交易中显示' }
        ],
        pageSize: 10, // 分页配置
        total: 0,
        nowPage: 0,
        operationConfig: { // 表格操作配置
          fixed: 'right',
          width: 200,
          operationButton: [
            // 每一个操作。value:操作文字；func:回调函数
            { value: '修改', func: this.myModify },
            { value: '删除', func: this.myDelete }
          ]
        },
        dlgTilte: '标题',
        dlgFormVisible: false,
        dlgFormLabelWidth: '100px',
        dlgForm: {
          attr_num: '', // 序号
          label: '', // 属性名称
          alias: ''// 属性别名
        },
        dlgFormRules: {
          attr_num: [
            { required: true, message: '请输入', trigger: 'blur' }
          ], // 序号
          label: [
            { required: true, message: '请输入', trigger: 'blur' }
          ], // 属性名称
          alias: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],//属性别名
          is_readonly_data: [
            { required: true, message: '请选择', trigger: 'change' }
          ], // 属性约束
          form_rules: [
            { required: true, message: '请选择', trigger: 'change' }
          ], // 所在地区
          deal_show: [
            { required: true, message: '请选择', trigger: 'change' }
          ], // 所在地区
        },
        dlgFormDisabled: false, // 是否禁用，新增、修改不禁用，详情禁用
        dlgOkHandler: 'addOk' // 自己定义调用那个函数
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      // 页面初始化
      init: function() {
        // 排列方式
        this.colCountItems = [
          { value: '1', text: '一行两列' },
          { value: '2', text: '一行三列' }
        ]
        // 资产一级分类
        this.cbcTypeItems = [
          { value: '1', text: '现金及银行存款' },
          { value: '2', text: '同业存单' },
          { value: '3', text: '拆放同业及买入返售' }
        ]
        // 人行一级分类
        this.pbTypeItems = [
          { value: '1', text: '现金' },
          { value: '2', text: '存款' },
          { value: '3', text: '可转让存单' }
        ]
        // 模拟数据
        this.nowPage = 1
        this.total = 1
        this.tableData = [
          { attr_num: '1', field_type: '资产', label: '资产负债代码', alias: '', default_value: '',
            form_rules: '必填', is_readonly: '否', sys_level: '系统', deal_show: '显示' },
          { attr_num: '2', field_type: '资产', label: '资产负债名称', alias: '', default_value: '',
            form_rules: '必填', is_readonly: '否', sys_level: '系统', deal_show: '显示' }
        ]
        // 弹出框 下拉字典
        this.option.formItemdData.form_rulesData = [
          { value: '1', label: '必填' },
          { value: '2', label: '不必填' }
        ]
        this.option.formItemdData.is_readonlyData = [
          { value: '1', label: '只读' },
          { value: '2', label: '不只读' }
        ]
        this.option.formItemdData.deal_showData = [
          { value: '1', label: '显示' },
          { value: '2', label: '不显示' }
        ]
      },
      cbcChange: function(event) { // 根据一级分类，调整二级分类字典
        if (event == 1) {
          this.cbcSubTypeItems = [
            { value: '1002', text: '本行存款' },
            { value: '1003', text: '他行存款' },
            { value: '1004', text: '本行发行的大额存单' },
            { value: '1005', text: '他行发行的大额存单' }
          ]
        } else if (event == 2) {
          this.cbcSubTypeItems = [
            { value: '2501', text: '本行发行的同业存单' },
            { value: '2502', text: '他行发行的同业存单' }
          ]
        } else if (event == 3) {
          this.cbcSubTypeItems = [
            { value: '1107', text: '拆放同业' },
            { value: '1108', text: '买入返售' }
          ]
        } else {
          this.cbcSubTypeItems = [
            { value: event, text: event }
          ]
        }
        console.log('init....')
      },
      pbChange: function(event) { // 根据一级分类，调整二级分类字典
        if (event == 1) {
          this.pbSubtypeItems = [
          ]
        } else if (event == 2) {
          this.pbSubtypeItems = [
            { value: 'b1', text: '境内存款' },
            { value: 'b2', text: '境外存款' }
          ]
        } else if (event == 3) {
          this.pbSubtypeItems = [
            { value: 'c1', text: '同业存单' },
            { value: 'c2', text: '大额存单' }
          ]
        } else {
          this.pbSubtypeItems = [
          ]
        }
        console.log('init....')
      },
      pbSubChange: function(event) { // 根据二级分类，调整三级分类字典
        this.pbSubtypeItems = [
        ]
      },
      // 事件触发
      search() { // 查询函数
        for (let i = 0; i < 5; i++) {
          this.tableData.push(
            { order: '1' }
          )
        }
        this.total = 30
        this.nowPage = 1
      },
      // ======================表格======================
      myModify(item, index) {
        this.dlgTilte = '修改属性信息'
        this.dlgFormDisabled = false // 是否禁用输入框
        this.dlgOkHandler = 'updateOk' // 自己定义调用那个函数
        this.dlgFormVisible = true
        // 赋值
        this.copyObj(item, this.dlgForm)
      },
      updateOk(formData, obj) {
        obj.validate(function(boolean, error) {
          if (boolean) {
            alert('修改成功')
          }
        })
      },
      copyObj(obj1, obj2) {
        for (var key in obj1) {
          if (key === '__proto__') {
            continue
          }
          obj2[key] = obj1[key]
        }
      },
      addOk(formData) {
        console.log('add', formData)
      },
      okHandler(formData, obj) {
        var _this = this
        this.$refs['dlgForm'].validate((valid) => {
          if (valid) {
            console.log('校验通过，发送保存')
            this[this.dlgOkHandler](formData)
          } else {
            console.log('表单数据检验没有全部通过！！')
          }
        })
      },
      myDelete(item, index) {
        this.$confirm('确认删除吗?', '提示', {})
          .then(() => {
            for (var i = 0; i < this.tableData.length; i++) {
              if (item.id === this.tableData[i].id) {
                this.tableData.splice(i, 1)
                break
              }
            }
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
          .catch(() => { /* 用户取消注销 */ })
      }
    }
  }
</script>

<style scoped>
</style>
